<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>jQuery Demos and Documentation</title>
	<link rel="stylesheet"  href="css/themes/default/jquery.mobile-1.2.0.css" />
	<link rel="stylesheet" href="custom.css" />
	<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
	<script type="text/javascript" charset="utf-8" src="cus/db.js"></script>
	<script src="js/jquery.js"></script>
	<script src="js/jquery.mobile-1.2.0.js"></script>
	<script src="custom-scripting.js"></script>
</head>
<body onLoad="onDeviceReady()">
<div data-role="page" id='home' class="type-home" data-theme="a">
	
	<div data-role="content" id='homevcontent' class='content'>
		
	</div>
	<div data-role="footer" class="footer-docs" data-theme="a">
		<div data-role="navbar">
			<ul>
				<li><a href="#home" data-iconpos="top" data-icon="home">Home</a></li>
				<li><a href="#top" data-iconpos="top" data-icon="arrow-u">Top</a></li>
				<li><a href="#cat" data-iconpos="top" data-icon="grid">Category</a></li>
				<li><a href="#searchcat" data-iconpos="top" data-icon="search">Search</a></li>
			</ul>
		</div><!-- /navbar -->
	</div>
</div>


<div data-role="page" id='top' class="type-home" data-theme="a">
	
	<div data-role="content" id='topvcontent' class='content'>
	
	</div>
	<div data-role="footer" class="footer-docs" data-theme="a">
		<div data-role="navbar">
			<ul>
				<li><a href="#home" data-iconpos="top" data-icon="home">Home</a></li>
				<li><a href="#top" data-iconpos="top" data-icon="arrow-u">Top</a></li>
				<li><a href="#cat" data-iconpos="top" data-icon="grid">Category</a></li>
				<li><a href="#searchcat" data-iconpos="top" data-icon="search">Search</a></li>
			</ul>
		</div><!-- /navbar -->
	</div>
</div>


<div data-role="page" id='cat' class="type-home" data-theme="a">
	
	<div data-role="content" id='vcontent' class='content'>
	<script>
	function processResults(json){
		$(".facebookfeed").html('');	
		  var keywords = json.responseData.feed.entries[0].content;
		  keywords = keywords.replace("<ol>","<ul data-role='listview'>");
		  $(".facebookfeed").html(keywords).find("a").each(function(){
			var newhref = $(this).html().replace(" ","+");
			$(this).attr("href","#viewcat");
			$(this).attr("val",newhref);
			$(this).bind("click",function(){
				var catToShow = $(this).attr("val");
				localStorage.getItem('catToShow',catToShow);
			});
		  });
	}
  
  </script>
	<div id='json_data' class='facebookfeed'>
	</div>
	<script src="http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&q=http://www.google.com/trends/hottrends/atom/hourly&callback=processResults">
    </script>
	</div>
	<div data-role="footer" class="footer-docs" data-theme="a">
		<div data-role="navbar">
			<ul>
				<li><a href="#home" data-iconpos="top" data-icon="home">Home</a></li>
				<li><a href="#top" data-iconpos="top" data-icon="arrow-u">Top</a></li>
				<li><a href="#cat" data-iconpos="top" data-icon="grid">Category</a></li>
				<li><a href="#searchcat" data-iconpos="top" data-icon="search">Search</a></li>
			</ul>
		</div><!-- /navbar -->
	</div>

</div>


<div data-role="page" id='viewcat' class="type-home" data-theme="a">
	
	<div data-role="content" id='viewcatvcontent' class='content'>
	
	</div>
	<div data-role="footer" class="footer-docs" data-theme="a">
		<div data-role="navbar">
			<ul>
				<li><a href="#home" data-iconpos="top" data-icon="home">Home</a></li>
				<li><a href="#top" data-iconpos="top" data-icon="arrow-u">Top</a></li>
				<li><a href="#cat" data-iconpos="top" data-icon="grid">Category</a></li>
				<li><a href="#searchcat" data-iconpos="top" data-icon="search">Search</a></li>
			</ul>
		</div><!-- /navbar -->
	</div>
</div>

<div data-role="page" id='searchcat' class="type-home" data-theme="a">
	
	<div data-role="content" id='searchcatvcontent' class='content'>
	
	
	<div data-role="fieldcontain" class="ui-hide-label">
		<label for="search">Search:</label>
		<input type="search" name="search-mini" id="search-mini" value="" data-mini="true" />
		<input type="submit"id="findCat" name="submit" value="Search"  />
	</div>
	
	
	</div>
	<div data-role="footer" class="footer-docs" data-theme="a">
		<div data-role="navbar">
			<ul>
				<li><a href="#home" data-iconpos="top" data-icon="home">Home</a></li>
				<li><a href="#top" data-iconpos="top" data-icon="arrow-u">Top</a></li>
				<li><a href="#cat" data-iconpos="top" data-icon="grid">Category</a></li>
				<li><a href="#searchcat" data-iconpos="top" data-icon="search">Search</a></li>
			</ul>
		</div><!-- /navbar -->
	</div>
</div>


</body>
</html>
